<template>
	<!--佛山综合税费申报-->
	<view class="zhsfsb">
		<view class="title">
			<text>综合税费申报</text>
		</view>
		<view class="sbLists">
			<uni-group class="dqjItem">
				<view class="sbtitle">
					<view>出租屋地址：{{zhsbData.address}}</view>
				</view>
				<view v-if="zlJqJudge">
					<view class="item">
						<view class="name">租赁编号</view>
						<view class="con">{{zhsbData.rentCode}}</view>
					</view>
					<view class="item">
						<view class="name">纳税人识别号</view>
						<view class="con">{{zhsbData.shxydm}}</view>
					</view>
					<view class="item">
						<view class="name">纳税人名称</view>
						<view class="con">{{zhsbData.nsrmc}}</view>
					</view>
					<view class="item">
						<view class="name">租赁月份起止</view>
						<view class="con">
							<text>{{zhsbData.startDate}}</text>
							<text>至</text>
							<text>{{zhsbData.endDate}}</text>
						</view>
					</view>
					<view class="item">
						<view class="name">租赁类别</view>
						<view class="con">{{zhsbData.houseRentTypeMc}}</view>
					</view>
					<view class="item">
						<view class="name">租赁用途</view>
						<view class="con">{{zhsbData.rentUseTypeMc}}</view>
					</view>
					<view class="item">
						<view class="name">租赁性质</view>
						<view class="con">{{zhsbData.rentPropertyMc}}</view>
					</view>
					<view class="item">
						<view class="name">应税土地面积</view>
						<view class="con">{{zhsbData.taxArea}}</view>
					</view>
					<view class="item">
						<view class="name  hj">所占比例</view>
						<view class="con"><text>{{parseFloat(zhsbData.szfe)*100||""}}</text><text>%</text></view>
					</view>
				</view>
			</uni-group>
		</view>
		<view class="zlzkorxs">
			<view class="zlxxZs" v-show="!zlJqJudge" @click="bindZs">
				<view>租赁详情展开</view>
				<uni-icons custom-prefix="custom-icon" type="bottom" size="30" class="cg"></uni-icons>
			</view>
			<view class="zlxxZs" v-show="zlJqJudge" @click="bindZs">
				<view>租赁详情收起</view>
				<uni-icons custom-prefix="custom-icon" type="top" size="30" class="cg"></uni-icons>
			</view>
		</view>
		<view class="table">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="100rpx">序号</uni-th>
					<uni-th align="center" width="250rpx">税款所属期</uni-th>
					<uni-th align="center" width="150rpx">月租金</uni-th>
					<uni-th align="center" width="225rpx">计税租金(含税)</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in zlData" :key="index">
					<uni-td align="center">{{index+1}}</uni-td>
					<uni-td align="center">{{item.startDate+"至"+item.endDate}}</uni-td>
					<uni-td align="center">{{item.agreementRent}}</uni-td>
					<uni-td align="center">{{item.rent}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="zlform">
			<uni-forms ref="form" validate-trigger="bind" err-show-type="undertext">
				<view class="zlformItem">
					<uni-forms-item name="fplx" required label="发票类型" label-width="200rpx" required>
						<view class="selectXlk">
							{{formData.fplx}}
						</view>
					</uni-forms-item>
				</view>
				<view class="zlformItem" style="margin-top: 6rpx;">
					<uni-forms-item name="zjssq" required label="税款所属期" label-width="200rpx" required>
						<view class="jksjxz">
							<view class="uni-input sjxz">{{formData.zjssqq}}</view>
							<view style="color: black;margin: 0 4rpx;">-</view>
							<view class="uni-input sjxz">{{formData.zjssqz}}</view>
						</view>
					</uni-forms-item>
				</view>
			</uni-forms>
			<view class="btn jsjkbtn">
				<button type="primary" size="mini" @click="jssk">计算税款</button>
			</view>
		</view>
		<view class="table">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="150rpx">征收项目</uni-th>
					<uni-th align="center" width="175rpx">应纳税额</uni-th>
					<uni-th align="center" width="175rpx">减免税额</uni-th>

				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in czwSbZhMxList" :key="index">
					<uni-td align="center">{{item.pmmc}}</uni-td>
					<uni-td align="center">{{item.ynse}}</uni-td>
					<uni-td align="center">{{Math.round(Number(item.jmse+item.phjmse)*100)/100}}</uni-td>
				</uni-tr>
				<uni-tr v-if="jsseData.ynse">
					<uni-td align="center" style="font-weight: bold;">合计</uni-td>
					<uni-td align="center">{{jsseData.ynse}}</uni-td>
					<uni-td align="center">{{Math.round(Number(jsseData.jmse+jsseData.phjmse)*100)/100}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view>
			<view class="sesj">
				<view class="seTitle">
					<view class="lsbt"></view>
					<text>已缴税额</text>
				</view>
				<view class="seItem">
					<view>
						<view class="itemTitle">
							已缴税额（元）
						</view>
					</view>
					<view class="itemMny">{{jsseData.yjse}}</view>
				</view>
			</view>
			<view class="sesj">
				<view class="seTitle">
					<view class="lsbt"></view>
					<text>滞纳金</text>
				</view>
				<view class="seItem">
					<view>
						<view class="itemTitle">
							滞纳金（元）
						</view>
						<view class="itemTip">
							(根据《中华人民共和国税收征收管理法》，从滞纳税款之日起，按日加收滞纳税款万分之五的滞纳金。本申报显示的滞纳金金额计算截至{{$commonCzwjs.date("","年月日")}}。若您未于当日清缴税费，滞纳金仍将相应增加，以实际清缴时的金额为准。)
						</view>
					</view>
					<view class="itemMny">{{jsseData.znj}}</view>
				</view>
			</view>
			<view class="sesj">
				<view class="seTitle">
					<view class="lsbt"></view>
					<text>当前合计</text>
				</view>
				<view class="seItem">
					<view>
						<view class="itemTip">
							(合计金额=应纳税额-减免税额-已缴税额+滞纳金)
						</view>
					</view>
					<view class="itemMny">{{Math.round(Number(jsseData.znj+jsseData.ybtse)*100)/100 || 0}}</view>
				</view>
			</view>
			<view class="sbBtn btn">
				<button type="primary" size="mini" @click="ksSb">申报</button>
				<button type="default" plain="true" size="mini" @click="goBack">返回修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPreSbInfo,
		calSbxx,
		saveSbxx
	} from "@/utils/common-api.js"
	export default {
		data() {
			return {
				zhsbData: "",
				formData: {
					fplx: "",
					zjssqq: "税款所属期起",
					zjssqz: "税款所属期止",
				},
				// 租赁信息
				zlData: [],
				zlJqJudge: true, //表格显示状态
				zhsfsbForm: "",
				jsseData: "", //计算税额数据
				sbId: "", //申报id
				czwSbZhMxList: "", //应纳税额列表
				// ynsehj: "",
				// jmsehj: "",

			}
		},
		onLoad(e) {
			// console.log(e) 
			this.zhsfsbForm = JSON.parse(e.zhsfsbForm)
			this.handleSearch()
		},
		methods: {
			async handleSearch() {
				this.zhsfsbForm.isNeedRentMx = "1"
				let res = await getPreSbInfo(this.zhsfsbForm)
				if (res.head.errorCode == "0") {
					this.zhsbData = res.body
					// 租赁信息
					this.zlData = res.body.czwDjRentZbDTOList
					// 默认可开发票类型
					this.formData.fplx = "增值税电子普通发票"

					// 租金所属期开始时间默认且不能修改
					this.formData.zjssqq = res.body.nextSbMonth.slice(0, 4) + '-' + res.body.nextSbMonth.slice(4, 6)
					// 租金所属期结束时间默认且不能修改(按月支付默认为开始时间，一次性支付默认租赁结束时间)
					if (this.zhsbData.paymentWay == "01") {
						this.formData.zjssqz = this.zlData[this.zlData.length - 1].endDate.slice(0, 7)
					}
					if (this.zhsbData.paymentWay == "02") {
						this.formData.zjssqz = this.formData.zjssqq
					}
					if(this.judgeCtd()){
						return
					}
					this.judgeJkyf()
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
			},
			// 纯土地不能线上申报
			judgeCtd() {
				let judge = false
				if (this.zhsbData.rentUseTypeMc == "纯土地") {
					uni.showModal({
						title: '提示',
						content: '租赁用途为“纯土地”类型，不能线上税费申报，请到对应街道代征单位进行税费申报。',
						confirmColor: '#000000', //确定字体颜色 
						buttonText: '确定',
						showCancel: false, //没有取消按钮的弹框 
						success: async (res) => {
							if (res.confirm) {
								console.log("")
							}
						}
					});
					judge = true
				}
				return judge
			},
			// 判断是否为 不允许预缴往后月份税款、一次支付不允许提前预缴税款
			judgeJkyf() {
				// 获取当前时间
				let currentTiem = this.$commonCzwjs.date("", "").slice(0, 6)
				// /租金结束时间
				let endTime = this.formData.zjssqz.replace("-", "")
				// 租付方式
				let paymentWay = this.zhsbData.paymentWay
				// 付款时间
				let paymentTime = ""
				if (this.zhsbData.paymentTime) {
					paymentTime = this.zhsbData.paymentTime.slice(0, 7).replace("-", "")
				}

				// 1 不允许预缴往后月份税款 2 
				let judge = -1
				if (paymentWay == "01" && parseInt(paymentTime) > parseInt(currentTiem)) {
					judge = 1
					this.tstk("一次支付不允许提前预缴税款")
				}
				if (paymentWay == "02" && parseInt(endTime) > parseInt(currentTiem)) {
					judge = 2
					this.tstk("不允许预缴往后月份税款")
				}

				return judge == -1 ? false : true
			},
			// 计算两个时间相隔多少个月
			monthNumber(date1, date2) {
				let ksYear = date1.slice(0, 4);
				let ksMonth = date1.slice(5, 7);
				let JsYear = date2.slice(0, 4);
				let JsMonth = date2.slice(5, 7);
				let xgMonth = (parseInt(ksYear) - parseInt(JsYear)) * 12 + (parseInt(ksMonth) - parseInt(JsMonth))
				return xgMonth
			},
			// 申报提示
			tstk(msg) {
				uni.showModal({
					title: '提示',
					content: msg,
					confirmColor: '#000000', //确定字体颜色 
					buttonText: '确定',
					showCancel: false, //没有取消按钮的弹框 
					success: async (res) => {
						if (res.confirm) {
							console.log("")
						}
					}
				});
			},
			// 计算税款
			async jssk() {
				if(this.judgeCtd()){
					return
				}
				if (this.judgeJkyf()) {
					return
				}
				let datas = this.zhsfsbForm
				let params = {
					nsrId: datas.nsrId,
					rentId: datas.rentId,
					startMonth: this.$commonCzwjs.reGetYearsMonth(this.formData.zjssqq, ""),
					endMonth: this.$commonCzwjs.reGetYearsMonth(this.formData.zjssqz, ""),
					isTaxZzs: "02", //发票类型固定
					sblx: "01",
					isCzr: datas.isCzr,
					sbqd: datas.sbqd,
					xzqhDm: datas.sjXzqhsjDm
				}
				let res = await calSbxx(params)
				// console.log(res)
				if (res.head.errorCode == "0") {
					this.jsseData = res.body
					this.czwSbZhMxList = res.body.czwSbZhMxList
					this.sbId = res.body.id
					this.ynsehj = 0
					this.jmsehj = 0
					// this.czwSbZhMxList.map(item => {
					// 	this.ynsehj = Math.round((this.ynsehj + item.ynse) * 100) / 100;
					// 	this.jmsehj = Math.round((this.jmsehj + item.jmse + item.phjmse) * 100) / 100;
					// })
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: res.head.errorMsg,
						icon: 'error',
						duration: 3000
					})
				}

			},
			// 开始申报
			ksSb() {
				// 判断是否已计算税款
				if (!this.jsseData) {
					uni.showToast({
						title: '请计算税款',
						icon: 'error',
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '请确认是否提交申报',
					confirmColor: '#007aff', //确定字体颜色
					buttonText: '确定',
					success: async (res) => {
						if (res.confirm) {
							let res = await saveSbxx({
								id: this.sbId
							})
							// console.log(res)
							if (res.head.errorCode == "0") {
								uni.redirectTo({
									url: "/pages/sfsb/sbResult?result=success&sbxx=" + JSON.stringify({
										address: this.zhsbData.address,
										nsrlx: this.zhsfsbForm.sbqd
									})
								});
							} else if (res.head.errorCode != "0") {
								uni.redirectTo({
									url: "/pages/sfsb/sbResult?result=fail"
								});
							}
						} else {
							console.log("")
						}
					}
				});
			},
			// 返回修改
			goBack() {
				this.$commonCzwjs.goPage({
					url: "/pages/sfsb/sbzlxxcx",
				})
			},
			// 点击展开或收起
			bindZs() {
				// console.log(this.zlJqJudge)
				if (this.zlJqJudge) {
					this.zlJqJudge = false
				} else {
					this.zlJqJudge = true
				}

			}
		}
	}
</script>

<style>
	.zhsfsb {}

	.title {
		width: 100%;
		height: 80rpx;
		background: #3171d5;
		text-align: center;
		line-height: 80rpx;
		color: white;
	}

	.sbLists {
		box-sizing: border-box;
		width: 100%;
		font-weight: bold;
		font-size: 26rpx;
	}

	.dqjItem {
		background: #ffffff;
		border: 2rpx solid #e7e7e7;
	}

	.sbtitle {
		padding: 10rpx 20rpx;
		border-bottom: 5rpx solid #3171d5;
		color: #3171d5;
		word-wrap: break-word;
	}

	.sbLists .qjk {
		margin-right: 20rpx;
	}

	::v-deep .uni-group .uni-group__content {
		padding: 0;
	}

	.uni-group__content {
		padding: 0;
	}

	.sbLists .item {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		border-bottom: 2rpx solid #66666640;
	}

	.sbLists .item:last-child {
		border-bottom: 0rpx solid #66666640;
	}

	.sbLists .item .name {
		width: 180rpx;
		color: #66666699;
		text-align: left;
		margin-right: 10rpx;
		padding-left: 20rpx;

	}

	.sbLists .item .con {
		color: #222222;
		text-align: left;
	}

	.sbLists .item .hj {
		color: #222222;
	}

	.table {
		padding: 10rpx;
		background: #ffffff;
	}

	.uni-table .uni-table-th,
	.uni-table .uni-table-td {
		font-size: 24rpx;
		color: black;
		padding: 10rpx 10rpx;
	}

	.uni-table .uni-table-th {
		background: #f2f2f2;
	}

	.zlzkorxs {
		display: flex;
		justify-content: center;
		background: #ffffff;
		padding: 10rpx 0;
	}

	.zlxxZs {
		font-size: 28rpx !important;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #3171d5;
		width: 240rpx;
		border: 2rpx solid #3171d5;
		padding: 5rpx;
		border-radius: 6rpx;
	}

	.uniui-bottom {
		font-size: 28rpx !important;
		color: #3171d5 !important;
		font-weight: bold;
	}

	.uniui-top {
		font-size: 28rpx !important;
		color: #3171d5 !important;
		font-weight: bold;
	}

	.zlform {
		background: #ffffff;
		width: 100%;
	}

	.zlformItem {
		width: 100%;
		padding: 0 20rpx 0 10rpx;
		box-sizing: border-box;
	}

	::v-deep .uni-forms-item__label {
		justify-content: flex-end !important;
		padding-right: 10rpx !important;
		font-size: 28rpx;

	}

	::v-deep .uni-forms-item {
		margin-bottom: 0;
	}

	::v-deep .uni-forms-item__content {
		display: flex;
		align-items: center;
	}

	.selectXlk {
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		width: 100%;
		font-size: 28rpx;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 10rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		text-align: center;
	}

	.jksjxz {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.sjxz {
		width: 250rpx;
		border: 1px #e5e5e5 solid;
		border-radius: 8rpx;
		font-size: 28rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.uni-input {
		color: gray;
		text-align: center;
	}

	.uni-input-border {
		height: 50rpx;
		width: 100%;
		font-size: 24rpx;
		color: #666;
		border: 2rpx #e5e5e5 solid;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.btn {
		text-align: center;
	}

	.btn uni-button {
		width: 240rpx;
		margin: 0 20rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	.sesj {
		margin-top: 10rpx;
		background: #ffffff;
	}

	.sesj>.seTitle {
		border-bottom: 2rpx #e5e5e5 solid;
		font-weight: bold;
		font-size: 28rpx;
		position: relative;
		padding: 10rpx 20rpx;
	}

	.seTitle .lsbt {
		position: absolute;
		left: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 30rpx;
		background: #1198d3;
		border-radius: 4rpx;
	}

	.seItem {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx #e5e5e5 solid;
	}

	.itemTitle,
	.itemMny {
		font-size: 28rpx;
	}

	.itemMny {
		min-width: 150rpx;
		text-align: center;
		color: red;
		font-weight: bold;
		word-wrap: break-word;
		word-break: break-all;
	}

	.itemTip {
		font-size: 20rpx;
		color: #666666;
	}

	.jsjkbtn {
		padding-top: 10rpx;
	}

	.sbBtn {
		padding: 20rpx;
		background: #ffffff;
	}
</style>